<template>
    <div style="display: block;width: 368px;margin: 0 auto;">
        <a-tabs defaultActiveKey="1" :size="'large'">
            <a-tab-pane tab="账户密码登录" key="1" >
                <a-form id="components-form-demo-normal-login" :form="form" class="login-form" @submit="handleSubmit">
                    <a-form-item>
                        <a-input size="large"  placeholder="Username" v-decorator="['userName',
                        { rules: [{ required: true, message: 'Please input your username!' }] },]">
                            <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
                        </a-input>
                    </a-form-item>
                    <a-form-item>
                        <a-input size="large"  type="password" placeholder="Password"
                                 v-decorator="['passworda',{ rules: [{ required: true, message: 'Please input your Password!' }] },]">
                            <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
                        </a-input>
                    </a-form-item>
                    <a-form-item>
                        <a-row :gutter="8">
                            <a-col :span="16">
                                <a-input size="large"  v-decorator="['captcha', { rules: [{ required: true, message: 'Please input the captcha you got!' }] },]">
                                    <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
                                </a-input>
                            </a-col>
                            <a-col :span="8" style="padding-top: 5px">
                                <div @click="refreshCode">
                                    <SIdentify :identifyCode="identifyCode"></SIdentify>
                                </div>
                            </a-col>
                        </a-row>
                    </a-form-item>

                    <a-form-item>
                        <a class="login-form-forgot" href="">
                            忘记密码
                        </a>
                        <a-button type="primary" html-type="submit" class="login-form-button">
                            登 录
                        </a-button>
                        <router-link to="./register">去注册</router-link>
                    </a-form-item>
                </a-form>
            </a-tab-pane>
        </a-tabs>
    </div>
</template>

<script>
    import SIdentify from '../../components/identify'
    export default {
        name: "login",
        data: function () {
            return {
                identifyCode: '',
            }
        },
        components: {SIdentify},
        beforeCreate() {
            this.form = this.$form.createForm(this, { name: 'normal_login' });
        },
        mounted() {
            this.refreshCode();
        },
        methods: {
            randomNum(min, max){
                return Math.floor(Math.random() * (max - min) + min);
            },
            refreshCode(){
                this.makeCode(4);
            },
            makeCode(number) {
                this.identifyCode = "";
                const strs = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v',
                    'w', 'x','y','z'];
                for (let i = 0; i < number; i++) {
                    this.identifyCode += strs[
                        this.randomNum(0, strs.length)
                        ];
                }
                console.log('验证码', this.identifyCode);
            },
            handleSubmit(e) {
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (!err) {
                        console.log('Received values of form: ', values);
                    }
                });
            }
        },
    }
</script>

<style scoped>
    #components-form-demo-normal-login .login-form {
        max-width: 300px;
    }
    #components-form-demo-normal-login .login-form-forgot {
        float: right;
    }
    #components-form-demo-normal-login .login-form-button {
        width: 100%;
    }
</style>
